<template>
  <div class="dashboard-container">
    <el-loading v-show="loading" class="loading-mask" spinner="el-icon-loading" background="rgba(255, 255, 255, 0.8)"></el-loading>
    <div v-show="basicvisible">
          <!-- 搜索筛选区域 -->
    <el-form  :inline="true" :model="searchForm" class="mb-4 search-form-custom" style="padding: 0 0 10px 0;">
      <el-row gutter="32" type="flex" justify="start" align="middle">
        <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
          <el-form-item label="专家姓名" class="custom-form-item beautify-label" label-width="90px" label-position="left">
            <el-input v-model="searchForm.expertName" placeholder="请输入" class="search-input beautify-input" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
          <el-form-item label="职称" label-width="90px" label-position="left">
            <el-select v-model="searchForm.title" placeholder="请选择" class="search-input">
              <el-option v-for="item in titleOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
          <el-form-item label="专业" label-width="90px" label-position="left">
            <el-cascader v-model="searchForm.primaryMajor" :options="majorOptions" placeholder="请选择" @change="handleMajorChange" class="search-input" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
          <el-form-item label="性别" label-width="90px" label-position="left">
            <el-select v-model="searchForm.gender" placeholder="请选择" class="search-input">
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row gutter="32" type="flex" justify="start" align="end" style="margin-top: 0;">
        <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
          <el-form-item label="年龄区间" class="beautify-label" label-width="90px" label-position="left">
            <span class="age-label beautify-age-group">
              <el-input v-model="searchForm.ageStart" placeholder="起始" class="search-input beautify-age-input" />
              <span class="mx-2 beautify-age-dash">-</span>
              <el-input v-model="searchForm.ageEnd" placeholder="结束" class="search-input beautify-age-input" />
              <span class="beautify-age-unit-inline">周岁</span>
            </span>
          </el-form-item>
        </el-col>    
            <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
          <el-form-item label="审核处室" label-width="90px" label-position="left">
            <el-select v-model="searchForm.auditOffice" placeholder="请选择" class="search-input">
              <el-option v-for="item in officeOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
          <!-- <el-form-item label="审核状态" label-width="90px" label-position="left">
            <el-select v-model="searchForm.auditStatus" placeholder="请选择" class="search-input">
              <el-option v-for="item in auditStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item> -->
        </el-col>

        <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6" style="display: flex; align-items: flex-start; justify-content: flex-end;">
          <el-form-item class="form-actions" style="margin-bottom: 0;">
            <el-button class="primary-btn search-btn" @click="resetForm">清空</el-button>
            <el-button class="primary-btn search-btn" @click="search">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 操作按钮区域 -->
    <div  v-if="role != 'lEADER' && role != 'DEPT' && role != 'CENTER'"  class="mb-4 button-container">
      <el-button class="custom-success-btn" @click="addExpert">新增</el-button>
      <!-- <el-button class="custom-danger-btn" @click="deleteSelected">删除</el-button> -->
      <!-- <el-button class="custom-primary-btn" @click="exportData">导出</el-button> -->
      <el-tooltip class="item" effect="dark" content="勾选仅导出所选，不勾选导出所有" placement="top"><el-button class="custom-primary-btn" @click="exportData()">导出附件</el-button></el-tooltip>
      <el-tooltip class="item" effect="dark" content="根据搜索条件导出列表" placement="top"><el-button class="custom-primary-btn" @click="excelExport()">导出列表</el-button></el-tooltip>
      <!-- <el-button class="custom-info-btn" @click="audit">出库</el-button> -->
    </div>
    <!-- 数据表格区域 -->
    <el-table :data="expertList" stripe border fit highlight-current-row ref="expertTable">
      <el-table-column type="selection" width="55" />
      <el-table-column 
  align="center" 
  label="序号" 
  width="50"
>
  <template slot-scope="scope">
    {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
  </template>
</el-table-column>
      <el-table-column prop="name" label="专家姓名" />
      <el-table-column prop="gender" label="性别">
        <template slot-scope="scope">
          {{ scope.row.gender === '男' ? '男' : '女' }}
        </template>
      </el-table-column>
      <el-table-column prop="education" label="学历">
        <template slot-scope="scope">
          {{ getEducationLabel(scope.row.education) }}
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄">
        <template slot-scope="scope">
          <span :style="{ color: scope.row.age > 75 ? '#ff4949' : '' }">{{ scope.row.age }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="job" label="职位" />
      <el-table-column prop="primaryMajor" label="专业">
        <template slot-scope="scope">
          {{ formatMajor(scope.row.primaryMajor) }}
        </template>
      </el-table-column>
      <el-table-column prop="workUnit" label="单位" />
      <el-table-column prop="title" label="职称" />
      <el-table-column prop="changeCounts" label="参与项目出现变更次数" />
     <el-table-column prop="joinMeeting" label="参与评审会次数" />
      <!--  <el-table-column prop="projectChangeCount" label="参与项目出现变更次数" /> -->
      <el-table-column  label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="viewExpert(scope.row)">查看</el-button>
          <el-button v-if="role != 'lEADER' && role != 'DEPT'&& role != 'CENTER'"  type="text" size="small" @click="output(scope.row)">出库</el-button>
          <el-button v-if="role != 'lEADER' && role != 'DEPT'&& role != 'CENTER'"  type="text" size="small" @click="editExpert(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="expertList.length === 0" class="empty-tip">
      <el-icon><circle-notch /></el-icon>
      <span>暂无符合条件的专家数据</span>
    </div>    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageSize"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </div>

    <!-- 分页组件 -->

    <!-- 编辑对话框 -->
    <!-- <el-dialog :visible.sync="editDialogVisible" title="编辑专家信息" width="60%">
      <el-form :model="editForm" :rules="editRules" ref="editFormRef" label-width="120px" class="aligned-form">
        <el-row gutter="32">
          <el-col :span="12">
            <el-form-item label="专家姓名" prop="name">
              <el-input v-model="editForm.name" />
            </el-form-item>
            <el-form-item label="学历" prop="education">
              <el-select v-model="editForm.education" placeholder="请选择">
                <el-option v-for="item in educationOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="职位" prop="job">
              <el-input v-model="editForm.job" />
            </el-form-item>
            <el-form-item label="单位" prop="workUnit">
              <el-input v-model="editForm.workUnit" />
            </el-form-item>
          </el-col>
          <el-col :span="12" style="display: flex; flex-direction: column;">
            <el-form-item label="性别" prop="gender" style="width: 100%;">
              <el-radio-group v-model="editForm.gender">
                <el-radio label="男">男</el-radio>
                <el-radio label="女">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄" prop="age" style="width: 100%;">
              <el-input v-model.number="editForm.age" type="number" />
            </el-form-item>
            <el-form-item label="专业" prop="primaryMajor" style="width: 100%;">
              <el-cascader v-model="editForm.primaryMajor" :options="majorOptions" placeholder="请选择" change-on-select />
            </el-form-item>
            <el-form-item label="职称" prop="title" style="width: 100%;">
              <el-select v-model="editForm.title" placeholder="请选择">
                <el-option v-for="item in titleOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveEdit">保存</el-button>
        </span>
      </template>
    </el-dialog> -->
    <!-- 新增对话框 -->
    <!-- <el-dialog :visible.sync="addDialogVisible" title="新增专家信息" width="60%">
      <el-form :model="addForm" :rules="addRules" ref="addFormRef" label-width="120px" class="aligned-form">
        <el-row gutter="32">
          <el-col :span="12">
            <el-form-item label="专家姓名" prop="expertName">
              <el-input v-model="addForm.expertName" />
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input v-model.number="addForm.age" type="number" />
            </el-form-item>
            <el-form-item label="职称" prop="title">
              <el-select v-model="addForm.title" placeholder="请选择">
                <el-option v-for="item in titleOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="学历" prop="education">
              <el-select v-model="addForm.education" placeholder="请选择">
                <el-option v-for="item in educationOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="审核状态" prop="auditStatus">
              <el-select v-model="addForm.auditStatus" placeholder="请选择">
                <el-option v-for="item in auditStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="display: flex; flex-direction: column;">
            <el-form-item label="性别" prop="gender" style="width: 100%;">
              <el-radio-group v-model="addForm.gender">
                <el-radio label="男">男</el-radio>
                <el-radio label="女">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="职位" prop="position" style="width: 100%;">
              <el-input v-model="addForm.position" />
            </el-form-item>
            <el-form-item label="专业" prop="major" style="width: 100%;">
              <el-cascader v-model="addForm.major" :options="majorOptions" placeholder="请选择" change-on-select />
            </el-form-item>
            <el-form-item label="单位" prop="unit" style="width: 100%;">
              <el-input v-model="addForm.unit" />
            </el-form-item>
            <el-form-item label="审核处室" prop="auditOffice" style="width: 100%;">
              <el-select v-model="addForm.auditOffice" placeholder="请选择">
                <el-option v-for="item in officeOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveAdd">保存</el-button>
        </span>
      </template>
    </el-dialog> -->
    <!-- 导出对话框 -->
    <el-dialog :visible.sync="exportDialogVisible" title="导出统计列表" width="40%">
      <el-form :model="exportForm" label-width="0" style="padding: 0 2.5em;">
        <el-row class="export-dialog-row" gutter="0" style="align-items: stretch;">
          <el-col :span="6" style="display: flex; align-items: center; justify-content: flex-end; height: 100%;">
            <span class="export-label">导出格式</span>
          </el-col>
          <el-col :span="18" style="display: flex; align-items: center; height: 100%;">
            <el-radio-group v-model="exportForm.format" class="export-radio-group">
              <el-radio label="excel">Excel</el-radio>
              <el-radio label="csv">CSV</el-radio>
              <el-radio label="pdf">PDF</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row class="export-dialog-row" gutter="0" style="align-items: stretch;">
          <el-col :span="6" style="display: flex; align-items: center; justify-content: flex-end; height: 100%;">
            <span class="export-label">导出范围</span>
          </el-col>
          <el-col :span="18" style="display: flex; align-items: center; height: 100%;">
            <el-radio-group v-model="exportForm.scope" class="export-radio-group">
              <el-radio label="current">当前页数据</el-radio>
              <el-radio label="all">全部数据</el-radio>
              <el-radio label="selected">仅导出选中数据</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="exportDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmExport">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 删除确认对话框 -->
    <el-dialog :visible.sync="deleteDialogVisible" title="确认删除" width="30%">
      <div slot="content">
        <p>确定要删除选中的专家及其关联账号吗？</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="confirmDelete">确认删除</el-button>
      </div>
    </el-dialog>
    <!-- 入库对话框 -->
    <el-dialog 
      :visible.sync="storageDialogVisible" 
      title="专家入库" 
      width="70%" 
      :close-on-click-modal="false"
      class="storage-dialog"
    >
      <div class="storage-container">
        <div class="storage-header">
          <div class="selected-count">
            已选择 <span class="count-number">{{ selectedRows.length }}</span> 位专家
          </div>
          <div class="storage-status" v-if="storageStatus">
            <el-tag :type="getStorageStatusType">{{ storageStatus }}</el-tag>
          </div>
        </div>

        <div class="storage-content">
          <el-table
            :data="selectedRows"
            style="width: 100%"
            max-height="400"
          >
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="expertName" label="专家姓名"></el-table-column>
            <el-table-column prop="title" label="职称"></el-table-column>
            <el-table-column prop="primaryMajor" label="专业">
              <template slot-scope="scope">
                {{ formatMajor(scope.row.primaryMajor) }}
              </template>
            </el-table-column>
            <el-table-column prop="auditStatus" label="当前状态">
              <template slot-scope="scope">
                <el-tag :type="getStatusType(scope.row.auditStatus)">
                  {{ scope.row.auditStatus }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="storageStatus" label="入库状态">
              <template slot-scope="scope">
                <span v-if="!scope.row.storageStatus">待入库</span>
                <el-tag v-else :type="scope.row.storageStatus.type">
                  {{ scope.row.storageStatus.text }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>

          <div class="storage-progress" v-if="isStoraging">
            <el-progress 
              :percentage="storageProgress" 
              :status="storageProgress === 100 ? 'success' : ''"
            ></el-progress>
            <div class="progress-text">正在入库中，请稍候...</div>
          </div>

          <div class="storage-result" v-if="storageComplete">
            <div class="result-summary">
              <div class="success-count">
                <i class="el-icon-success"></i>
                成功入库：{{ successCount }} 位
              </div>
              <div class="fail-count" v-if="failCount > 0">
                <i class="el-icon-warning"></i>
                入库失败：{{ failCount }} 位
              </div>
            </div>
            <div class="fail-list" v-if="failCount > 0">
              <div class="fail-title">失败原因：</div>
              <el-table
                :data="failList"
                style="width: 100%"
                max-height="200"
              >
                <el-table-column prop="expertName" label="专家姓名"></el-table-column>
                <el-table-column prop="reason" label="失败原因"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <template v-if="!isStoraging && !storageComplete">
          <el-button @click="storageDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="startStorage" :disabled="selectedRows.length === 0">
            确认入库
          </el-button>
        </template>
        <template v-if="storageComplete">
          <el-button type="primary" @click="closeStorageDialog">完成</el-button>
        </template>
      </div>
    </el-dialog>
    <!-- 审核对话框 -->
    <el-dialog 
      :visible.sync="auditDialogVisible" 
      title="专家审核" 
      width="70%" 
      :close-on-click-modal="false"
      class="audit-dialog"
    >
      <div class="audit-container">
        <div class="audit-header">
          <div class="selected-count">
            已选择 <span class="count-number">{{ selectedRows.length }}</span> 位专家
          </div>
          <div class="audit-actions">
            <el-radio-group v-model="batchAuditStatus" size="medium">
              <el-radio-button label="已审核入库">审核通过</el-radio-button>
              <el-radio-button label="审核不通过">审核不通过</el-radio-button>
            </el-radio-group>
          </div>
        </div>

        <div class="audit-content">
          <el-table
            :data="selectedRows"
            style="width: 100%"
            max-height="400"
          >
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="expertName" label="专家姓名"></el-table-column>
            <el-table-column prop="title" label="职称"></el-table-column>
            <el-table-column prop="primaryMajor" label="专业">
              <template slot-scope="scope">
                {{ formatMajor(scope.row.primaryMajor) }}
              </template>
            </el-table-column>
            <el-table-column prop="auditStatus" label="当前状态">
              <template slot-scope="scope">
                <el-tag :type="getStatusType(scope.row.auditStatus)">
                  {{ scope.row.auditStatus }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="审核结果" width="200">
              <template slot-scope="scope">
                <el-select 
                  v-model="scope.row.newAuditStatus" 
                  placeholder="请选择"
                  @change="handleAuditStatusChange(scope.row)"
                >
                  <el-option label="审核通过" value="已审核入库"></el-option>
                  <el-option label="审核不通过" value="审核不通过"></el-option>
                </el-select>
              </template>
            </el-table-column>
          </el-table>

          <!-- 不通过原因输入框 -->
          <div v-if="showRejectReason" class="reject-reason">
            <div class="reason-header">
              <span class="reason-title">审核不通过原因</span>
              <span class="reason-required">*</span>
            </div>
            <el-input
              type="textarea"
              v-model="rejectReason"
              :rows="4"
              placeholder="请输入审核不通过的原因（必填）"
              maxlength="500"
              show-word-limit
            ></el-input>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="auditDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAudit" :disabled="!canConfirmAudit">
          确认
        </el-button>
      </div>
    </el-dialog>
    <!-- 查看对话框 -->
    <el-dialog 
      :visible.sync="viewDialogVisible" 
      title="专家详细信息" 
      width="70%" 
      :close-on-click-modal="false"
      class="view-dialog"
    >
      <el-tabs v-model="activeTab">
        <!-- 基本信息标签页 -->
        <el-tab-pane label="基本信息" name="basic">
          <div class="expert-info">
            <el-descriptions :column="3" border>
              <el-descriptions-item label="专家姓名">{{ viewForm.expertName }}</el-descriptions-item>
              <el-descriptions-item label="性别">{{ viewForm.gender === '男' ? '男' : '女' }}</el-descriptions-item>
              <el-descriptions-item label="学历">{{ getEducationLabel(viewForm.education) }}</el-descriptions-item>
              <el-descriptions-item label="年龄">{{ viewForm.age }}</el-descriptions-item>
              <el-descriptions-item label="职位">{{ viewForm.position }}</el-descriptions-item>
              <el-descriptions-item label="专业">{{ formatMajor(viewForm.primaryMajor) }}</el-descriptions-item>
              <el-descriptions-item label="单位">{{ viewForm.unit }}</el-descriptions-item>
              <el-descriptions-item label="职称">{{ viewForm.title }}</el-descriptions-item>
              <el-descriptions-item label="入库时间">{{ viewForm.entryTime }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-tab-pane>
        
        <!-- 后评价信息标签页 -->
        <el-tab-pane label="后评价信息" name="evaluation">
          <div class="evaluation-info">
            <div class="total-reviews">
              <el-alert
                title="参与评审会统计"
                type="info"
                :closable="false">
                <template slot="title">
                  已参与评审会总次数：<span class="highlight">{{ viewForm.reviewCount }}</span> 次
                </template>
              </el-alert>
            </div>
            
            <!-- 评审会信息表格 -->
            <div class="review-table">
              <h3>评审会参与记录</h3>
              <el-table :data="reviewRecords" border style="width: 100%">
                <el-table-column prop="reviewName" label="评审会名称" min-width="200"/>
                <el-table-column prop="changeCount" label="涉及变更次数" width="120"/>
                <el-table-column prop="evaluation" label="相关评价" min-width="250">
                  <template slot-scope="scope">
                    <el-rate
                      v-model="scope.row.rating"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}分">
                    </el-rate>
                    <div class="evaluation-text">{{ scope.row.evaluation }}</div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="viewDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 出库对话框 -->
    <el-dialog 
      :visible.sync="withdrawalDialogVisible" 
      title="专家出库" 
      width="50%" 
      :close-on-click-modal="false"
      class="withdrawal-dialog"
    >
      <div class="withdrawal-container">
        <div class="withdrawal-header">
          <div class="selected-count">
            已选择 <span class="count-number">{{ selectedRows.length }}</span> 位专家
          </div>
        </div>

        <div class="withdrawal-content">
          <el-table
            :data="selectedRows"
            style="width: 100%"
            max-height="300"
          >
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="expertName" label="专家姓名"></el-table-column>
            <el-table-column prop="title" label="职称"></el-table-column>
            <el-table-column prop="primaryMajor" label="专业">
              <template slot-scope="scope">
                {{ formatMajor(scope.row.primaryMajor) }}
              </template>
            </el-table-column>
            <el-table-column prop="auditStatus" label="当前状态">
              <template slot-scope="scope">
                <el-tag :type="getStatusType(scope.row.auditStatus)">
                  {{ scope.row.auditStatus }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>

          <div class="withdrawal-reason">
            <div class="reason-header">
              <span class="reason-title">出库原因</span>
              <span class="reason-required">*</span>
            </div>
            <el-input
              type="textarea"
              v-model="withdrawalReason"
              :rows="4"
              placeholder="请输入专家出库的原因（必填）"
              maxlength="500"
              show-word-limit
            ></el-input>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="withdrawalDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmWithdrawal" :disabled="!withdrawalReason.trim()">
          确认出库
        </el-button>
      </div>
    </el-dialog>
    <!-- 不再需要内嵌editblock组件，改为直接跳转到view.vue页面 -->
    <el-dialog title="确认出库" :visible.sync="deleteDialogVisible" width="30%">
      <el-form
        :model="output1"
        label-width="100px"
        style="padding-left: 70px"
      >
        <el-form-item label="专家名称">
          <el-input style="width: 100%" v-model="output1.name" />
        </el-form-item>
        <el-form-item label="原因">
          <el-input style="width: 100%" v-model="output1.reason" />
        </el-form-item>
        <!-- <el-form-item label="电话">
          <el-input v-model="sysRole.phone" />
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false" icon="el-icon-refresh-right"
          >取 消</el-button
        >
        <el-button type="primary" icon="el-icon-check" @click="outputdata()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    
    <!-- 添加view组件视图 -->
    <div v-show="editvisibale">
      <el-page-header title="返回" @back="back2" content="查看专家详情" style="line-height: 50px; border-radius: 5px; background-color: #ffffff;">
      </el-page-header>
      <editblock :row="row"></editblock>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
//import editblock from '../dashboard/show.vue' // 不再需要，改为跳转到view.vue
import { getExpertBasicInfo,expertList,outlibrary,getExpertAttach} from '@/api/table'
// import role from '../../api/system/role';
import editblock from './view.vue' 
//  import {getdetail} from '@/api/new'
export default {
  name: 'ExpertDashboard',
  components:{
    editblock
  },
  data() {
    return {
      role:'',
      row: {},
      currentSearchParams: {},
      editvisibale: false,
      basicvisible: true,
      searchForm: {
        expertName: '',
        title: '',
        primaryMajor: [], 
        gender: '',
        ageStart: '',
        ageEnd: '',
        auditStatus: '',
        auditOffice: ''
      },
      titleOptions: [
        { value: "副高级职称", label: "副高级职称" },
        { value: "正高级职称", label: "正高级职称" },
        { value: "同等执业资格", label: "同等执业资格" },
        { value: "其他", label: "其他" }
      ],
      majorOptions: [
        { value: "建设管理", label: "建设管理" },
        { value: "计划管理", label: "计划管理" },
        { value: "质量管理", label: "质量管理" },
        { value: "水利规划", label: "水利规划" },
        { value: "水文泥沙", label: "水文泥沙" },
        { value: "水资源", label: "水资源" },
        { value: "节水评价", label: "节水评价" },
        { value: "水土保持", label: "水土保持" },
        { value: "农田水利", label: "农田水利" },
        { value: "城乡供水", label: "城乡供水" },
        { value: "水工结构", label: "水工结构" },
        { value: "河道治理", label: "河道治理" },
        { value: "工程地质与工程测绘", label: "工程地质与工程测绘" },
        { value: "水旱灾害防御抢险", label: "水旱灾害防御抢险" },
        { value: "工程造价与经济评价", label: "工程造价与经济评价" },
        { value: "征地移民", label: "征地移民" },
        { value: "电气机电与金属结构", label: "电气机电与金属结构" },
        { value: "水利政策法规", label: "水利政策法规" },
        { value: "施工组织与管理", label: "施工组织与管理" },
        { value: "水利信息化", label: "水利信息化" },
        { value: "工程管理", label: "工程管理" },
        { value: "节能评价", label: "节能评价" },
        { value: "资金管理", label: "资金管理" },
        { value: "水力发电", label: "水力发电" },
        { value: "劳动安全与工业卫生（安全生产）", label: "劳动安全与工业卫生（安全生产）" },
        { value: "环境影响评价", label: "环境影响评价" },
        { value: "社会稳定分析", label: "社会稳定分析" },
        { value: "质量检测", label: "质量检测" },
        { value: "水文化", label: "水文化" }
      ],
      output1: {
        name:'',
        id:'',
        expertId:'',
        reason:'',
      },
      auditStatusOptions: [
        { value: '未审核', label: '未审核' },
        { value: '已审核入库', label: '已审核入库' },
        { value: '审核不通过', label: '审核不通过' }
      ],
      officeOptions: [
        { value: '建监处', label: '建监处' },
        { value: '水保处', label: '水保处' },
        { value: '农水处', label: '农水处' },
        { value: '水资源处', label: '水资源处' },
        { value: '移民处', label: '移民处' },
        { value: '河湖处', label: '河湖处' },
        { value: '节水办', label: '节水办' },
        { value: '规计处', label: '规计处' },
        { value: '财审处', label: '财审处' },
        { value: '防御处', label: '防御处' },
      ],
      // 新增学历选项
      educationOptions: [
        {
          value: "博士研究生",
          label: "博士研究生",
        },
        {
          value: "硕士研究生",
          label: "硕士研究生",
        },
        {
          value: "大学本科",
          label: "大学本科",
        },
        {
          value: "大学专科",
          label: "大学专科",
        },
        {
          value: "高中/中专",
          label: "高中/中专",
        },
        {
          value: "初中及以下",
          label: "初中及以下",
        },
      ],
      expertList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      layout: 'total, sizes, prev, pager, next, jumper',
      // 编辑相关数据

      // 新增相关数据
      addDialogVisible: false,
      addForm: {
        expertName: '',
        gender: '',
        education: '',
        age: null,
        position: '',
        primaryMajor: [],
        unit: '',
        title: '',
        entryTime: '',
        reviewCount: 0,
        projectChangeCount: 0
      },
      addRules: {
        expertName: [
          { required: true, message: '请输入专家姓名', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        education: [
          { required: true, message: '请选择学历', trigger: 'change' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', message: '年龄必须为数字值', trigger: 'blur' }
        ],
        position: [
          { required: true, message: '请输入职位', trigger: 'blur' }
        ],
        primaryMajor: [
          { required: true, message: '请选择专业', trigger: 'change' }
        ],
        unit: [
          { required: true, message: '请输入单位', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请选择职称', trigger: 'change' }
        ],
        entryTime: [
          { required: true, message: '请选择入库时间', trigger: 'change' }
        ],
        reviewCount: [
          { required: true, message: '请输入参与评审会次数', trigger: 'blur' },
          { type: 'number', message: '次数必须为数字值', trigger: 'blur' }
        ],
        projectChangeCount: [
          { required: true, message: '请输入参与项目出现变更次数', trigger: 'blur' },
          { type: 'number', message: '次数必须为数字值', trigger: 'blur' }
        ]
      },
      // 导出相关数据
      exportDialogVisible: false,
      exportForm: {
        format: 'excel',
        scope: 'current'
      },
      // 删除相关数据
      deleteDialogVisible: false,
      deleteForm: {
        selectedIds: []
      },
      selectedRows: [],
      // API配置
      apiConfig: {
        baseUrl: process.env.VUE_APP_BASE_API || '',
        useMock: false // 切换真实API时设为false
      },
      storageDialogVisible: false,
      isStoraging: false,
      storageProgress: 0,
      storageComplete: false,
      storageStatus: '',
      successCount: 0,
      failCount: 0,
      failList: [],
      auditDialogVisible: false,
      batchAuditStatus: '已审核入库',
      rejectReason: '',
      showRejectReason: false,
      viewDialogVisible: false,
      viewForm: {},
      reviewRecords: [],
      activeTab: 'basic',
      withdrawalDialogVisible: false,
      withdrawalReason: '',
      labelWidth: '18%', // 使用百分比自适应label宽度
    }
  },
  computed: {
    getStorageStatusType() {
      switch(this.storageStatus) {
        case '准备入库': return 'info';
        case '入库中': return 'warning';
        case '入库完成': return 'success';
        case '入库异常': return 'danger';
        default: return 'info';
      }
    },
    canConfirmAudit() {
      // 如果有任何专家被设置为不通过，且没有填写原因，则不能确认
      if (this.showRejectReason && !this.rejectReason.trim()) {
        return false;
      }
      // 检查是否所有专家都已选择审核结果
      return this.selectedRows.every(row => row.newAuditStatus);
    }
  },
  watch: {
    batchAuditStatus(newValue) {
      // 批量设置审核状态
      this.selectedRows.forEach(row => {
        row.newAuditStatus = newValue;
      });
      this.showRejectReason = newValue === '审核不通过';
    }
  },
  created() {
    this.fetchData();
  },
  mounted() {
    this.role = sessionStorage.getItem('role')
    this.TotalexpertList();
  },
  methods: {
    back2(){
        this.editvisibale = false
        this.basicvisible = true
      },
      // 获取专家列表的方法
      TotalexpertList(params = {auditStatus:'已入库'}) {
      this.loading = true;
      expertList({ page: this.currentPage, pageSize: this.pageSize, ...params }).then(response => {
        console.log(response.data);
        this.expertList = response.data.records
        console.log(this.expertList);
        this.total = response.data.total || 0;
        this.loading = false;
      }).catch(error => {
        this.loading = false;
        console.error('获取专家列表失败:', error);
        this.$message({
          type: 'error',
          message: '获取专家列表失败，请重试'
        });
      })
    },
    // // 获取专家列表
    // async fetchData(params = {}) {
    //   this.loading = true;
      
    //   try {
    //     // 构建查询参数
    //     const queryParams = {
    //       page: this.currentPage,
    //       pageSize: this.pageSize,
    //       ...params
    //     };
        
    //     // 根据配置决定使用模拟数据还是真实API
    //     let response;
    //     if (this.apiConfig.useMock) {
    //       response = await this.simulateApiRequest(queryParams);
    //     } else {
    //       // 真实API请求
    //       response = await axios.get(`${this.apiConfig.baseUrl}/api/expert/list`, {
    //         params: queryParams
    //       });
          
    //       // 处理真实响应数据
    //       this.expertList = response.data.data || [];
    //       this.total = response.data.total || 0;
    //       return;
    //     }
        
    //     // 处理模拟响应数据
    //     this.expertList = response.data || [];
    //     this.total = response.total || 0;
        
    //   } catch (error) {
    //     console.error('获取专家列表失败:', error);
    //     this.$message({
    //       type: 'error',
    //       message: '获取专家列表失败，请重试'
    //     });
    //   } finally {
    //     this.loading = false;
    //   }
    // },
    
    // 模拟API请求函数
    simulateApiRequest(params) {
      return new Promise((resolve, reject) => {
        // 模拟网络延迟
        setTimeout(() => {
          try {
            // 复制模拟数据
            let allData = [
              {
                id: 1,
                expertName: '张三',
                gender: 'male',
                education: '博士研究生',
                age: 45,
                position: '主任',
                primaryMajor: ['督查稽察', '建设管理'],
                unit: '西安科技大学',
                title: '正高级职称',
                entryTime: '2025-05-10',
                reviewCount: 5,
                projectChangeCount: 2
              },
              {
                id: 2,
                expertName: '李四',
                gender: 'female',
                education: '硕士研究生',
                age: 32,
                position: '工程师',
                primaryMajor: ['水资源'],
                unit: '西安理工大学',
                title: '副高级职称',
                entryTime: '2025-05-01',
                reviewCount: 3,
                projectChangeCount: 1
              },
              {
                id: 3,
                expertName: '王五',
                gender: 'male',
                education: '大学本科',
                age: 50,
                position: '高级工程师',
                primaryMajor: ['水利规划'],
                unit: '陕西省水利学校',
                title: '同等执业资格',
                entryTime: '2025-05-15',
                reviewCount: 7,
                projectChangeCount: 4
              },
              {
                id: 4,
                expertName: '赵六',
                gender: 'male',
                education: '博士研究生',
                age: 38,
                position: '副主任',
                primaryMajor: ['水资源'],
                unit: '水利部水资源研究所',
                title: '正高级职称',
                entryTime: '2025-05-20',
                reviewCount: 6,
                projectChangeCount: 3
              },
              {
                id: 5,
                expertName: '钱七',
                gender: 'female',
                education: '硕士研究生',
                age: 42,
                position: '处长',
               primaryMajor: ['农田水利'],
                unit: '中国农业大学',
                title: '副高级职称',
                entryTime: '2025-05-05',
                reviewCount: 4,
                projectChangeCount: 2
              }
            ];
            // 应用筛选条件
            if (params.expertName) {
              const keyword = params.expertName.trim().toLowerCase();
              allData = allData.filter(item => 
                item.expertName.toLowerCase().includes(keyword)
              );
            }
            
            if (params.title) {
              allData = allData.filter(item => item.title === params.title);
            }
            
            if (params.primaryMajor && params.primaryMajor.length > 0) {
              allData = allData.filter(item => {
                return params.primaryMajor.every(m => item.primaryMajor.includes(m));
              });
            }
            
            if (params.gender) {
              allData = allData.filter(item => item.gender === params.gender);
            }
            
            if (params.ageStart || params.ageEnd) {
              const ageStart = Number(params.ageStart) || 0;
              const ageEnd = Number(params.ageEnd) || Infinity;
              allData = allData.filter(item => item.age >= ageStart && item.age <= ageEnd);
            }
            
            if (params.auditStatus) {
              allData = allData.filter(item => item.auditStatus === params.auditStatus);
            }
            
            if (params.auditOffice) {
              allData = allData.filter(item => item.auditOffice === params.auditOffice);
            }
            
            // 分页处理
            const start = (params.page - 1) * params.pageSize;
            const end = start + params.pageSize;
            const paginatedData = allData.slice(start, end);
            
            // 模拟API响应
            resolve({
              code: 200,
              message: 'success',
              data: paginatedData,
              total: allData.length
            });
            
          } catch (error) {
            reject(error);
          }
        }, 800); 
      });
    },
    
    // 搜索方法（触发筛选）
    search() {
  this.currentPage = 1; // 重置为第一页
  this.expertList = []; // 清空当前专家列表数据
  // 提取搜索参数
  const searchParams = {
    name: this.searchForm.expertName || null,
    title: this.searchForm.title || null,
    primaryMajor: this.searchForm.primaryMajor && this.searchForm.primaryMajor.length > 0 ? this.searchForm.primaryMajor.join('/') : null,
    gender: this.searchForm.gender || null,
    ageStart: this.searchForm.ageStart || null,
    ageEnd: this.searchForm.ageEnd || null,
    auditStatus: this.searchForm.auditStatus || null,
    belong: this.searchForm.auditOffice || null,
    auditStatus: '已入库',
  };
  // 过滤掉空值参数
  const filteredParams = Object.fromEntries(
    Object.entries(searchParams).filter(([key, value]) => value !== null && value !== '')
  );
  // 请求数据
  this.TotalexpertList(filteredParams);
},
    
    // 清空方法（重置表单并刷新数据）
    resetForm() {
      this.$confirm('确定要清空所有筛选条件吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        // 重置表单数据
        this.searchForm = {
          expertName: '',
          title: '',
          primaryMajor: [],
          gender: '',
          ageStart: '',
          ageEnd: '',
          auditStatus: '',
          auditOffice: '',
        };
        // 触发搜索（无筛选条件，显示全部数据）
        this.search();
        this.$message.success('筛选条件已清空');
      });
    },
    
    // 获取状态标签类型
    getStatusType(status) {
      switch (status) {
        case '未审核': return 'info';
        case '已审核入库': return 'success';
        case '审核不通过': return 'danger';
        default: return 'info';
      }
    },
    
   // 分页相关方法
      handleSizeChange(size) {
      this.pageSize = size;
      this.TotalexpertList();
    },
    
handleCurrentChange(page) {
  this.currentPage = page; // 更新当前页码
  this.expertList = []; // 清空当前专家列表数据
  // 提取当前搜索条件
  const searchParams = {
    name: this.searchForm.expertName || null,
    title: this.searchForm.title || null,
    primaryMajor: this.searchForm.primaryMajor && this.searchForm.primaryMajor.length > 0 ? this.searchForm.primaryMajor.join('/') : null,
    gender: this.searchForm.gender || null,
    ageStart: this.searchForm.ageStart || null,
    ageEnd: this.searchForm.ageEnd || null,
    auditStatus: this.searchForm.auditStatus || null,
    belong: this.searchForm.auditOffice || null,
    auditStatus: '已入库', // 固定为已入库状态
  };
  // 过滤掉空值参数
  const filteredParams = Object.fromEntries(
    Object.entries(searchParams).filter(([key, value]) => value !== null && value !== '')
  );
  // 重新请求数据
  this.TotalexpertList(filteredParams);
},

    // 操作方法
    addExpert() {
      // 跳转到表单页面
      this.$router.push({
        path: '/form/index',
        query: { 
          mode: 'add'
        }
      });
    },
    
    // 删除选中专家
    deleteSelected() {
      this.selectedRows = this.$refs.expertTable.selection;
      
      if (this.selectedRows.length === 0) {
        this.$message.warning('请先选择要删除的专家');
        return;
      }
      
      // 提取选中的专家ID
      this.deleteForm.selectedIds = this.selectedRows.map(row => row.id);
      
      // 显示删除确认对话框
      this.deleteDialogVisible = true;
    },
    
    // 确认删除
    confirmDelete() {
      this.loading = true;
      
      // if (this.apiConfig.useMock) {
      //   // 模拟API调用
      //   setTimeout(() => {
      //     try {
      //       // 模拟删除操作
      //       this.expertList = this.expertList.filter(
      //         item => !this.deleteForm.selectedIds.includes(item.id)
      //       );
            
      //       // 刷新数据
      //       this.currentPage = 1; // 重置为第一页
      //       this.fetchData();
            
      //       // 关闭对话框
      //       this.deleteDialogVisible = false;
            
      //       // 显示成功消息
      //       this.$message({
      //         type: 'success',
      //         message: `成功删除 ${this.selectedRows.length} 位专家及其关联账号`
      //       });
      //     } catch (error) {
      //       console.error('删除失败:', error);
      //       this.$message({
      //         type: 'error',
      //         message: '删除失败，请重试'
      //       });
      //     } finally {
      //       this.loading = false;
      //       // 重置删除表单
      //       this.deleteForm = {
      //         selectedIds: []
      //       };
      //     }
      //   }, 800);
      // } else {
      //   // 真实API调用
      //   axios.post(`${this.apiConfig.baseUrl}/api/expert/delete`, {
      //     ids: this.deleteForm.selectedIds
      //   })
      //   .then(() => {
      //     // 刷新数据
      //     this.currentPage = 1;
      //     this.fetchData();
          
      //     // 关闭对话框
      //     this.deleteDialogVisible = false;
          
      //     // 显示成功消息
      //     this.$message({
      //       type: 'success',
      //       message: `成功删除 ${this.selectedRows.length} 位专家及其关联账号`
      //     });
      //   })
      //   .catch(error => {
      //     console.error('删除失败:', error);
      //     this.$message({
      //       type: 'error',
      //       message: '删除失败，请重试'
      //     });
      //   })
      //   .finally(() => {
      //     this.loading = false;
      //     // 重置删除表单
      //     this.deleteForm = {
      //       selectedIds: []
      //     };
      //   });
      // }
    },
    
    // 导出数据功能
    exportData() {
      // 检查是否有选中的行
      this.selectedRows = this.$refs.expertTable.selection;
      
      // 如果没有选中的行，默认使用当前页
      if (this.selectedRows.length === 0) {
        this.exportForm.scope = 'current';
      } else {
        // 有选中的行，默认使用选中的行
        this.exportForm.scope = 'selected';
      }
      
      this.exportDialogVisible = true;
    },
    
    // 导出附件
    async exportData() {
      try {
        // 检查是否有选中的行
        this.selectedRows = this.$refs.expertTable.selection;
        
        // 获取要导出的专家ID列表
        let ids = [];
        if (this.selectedRows.length > 0) {
          ids = this.selectedRows.map(row => row.expertId);
        } else {
          ids = this.expertList.map(row => row.expertId);
        }

        if (ids.length === 0) {
          this.$message.warning('没有可导出的数据');
          return;
        }

        const requestData = {
          ids: ids
        };

        this.$message.info('正在准备导出数据，请稍候...');
        
        // 使用原生 XMLHttpRequest 处理下载
        const xhr = new XMLHttpRequest();
        xhr.open('POST', process.env.VUE_APP_BASE_API + '/admin/common/pdfExport', true);
        xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
        xhr.setRequestHeader('Accept', 'application/zip, application/octet-stream');
        xhr.responseType = 'blob';

        const token = sessionStorage.getItem('token');
        if (!token) {
          this.$message.error('未登录或登录已过期，请重新登录');
          return;
        }
        xhr.setRequestHeader('token', token);
        
        xhr.onload = () => {
          if (xhr.status === 200) {
            // 从响应头获取Content-Type，如果没有则默认为application/pdf
            const contentType = xhr.getResponseHeader('Content-Type') || 'application/pdf';
            
            // 创建正确类型的Blob
            const blob = new Blob([xhr.response], { type: contentType });
            
            // 根据Content-Type确定文件扩展名
            let extension = '.zip';
            let fileName = '陕西省水利专家信息总览';
            if (contentType.includes('pdf')) {
              extension = '.pdf';
            } else if (contentType.includes('zip')) {
              extension = '.zip';
            }
            
            // 创建下载链接
            const url = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = fileName + extension;
            document.body.appendChild(link);
            link.click();
            
            // 清理
            setTimeout(() => {
              document.body.removeChild(link);
              window.URL.revokeObjectURL(url);
            }, 100);

            this.$message.success('导出成功');
          } else {
            throw new Error('导出失败');
          }
        };

        xhr.onerror = () => {
          this.$message.error('导出失败，请重试');
        };

        // 发送请求
        xhr.send(JSON.stringify(requestData));

      } catch (error) {
        console.error('导出失败:', error);
        this.$message.error(`导出失败: ${error.message || '请重试'}`);
      }
    },
    
    // 获取导出范围的文本描述
    getExportScopeText() {
      switch (this.exportForm.scope) {
        case 'current': return '当前页';
        case 'all': return '全部';
        case 'selected': return '选中';
        default: return '';
      }
    },
    output(row){
      console.log('出库专家信息:', row);
      this.deleteDialogVisible = true;
      this.output1.name = row.name || '';
      // 使用expertId作为出库ID
      //this.output1.expertId = row.expertId;
     //this.output1.id = row.expertId;
     this.output1.id = row.id;
      console.log('设置出库ID:', this.output1.id);
      this.output1.reason = '';
    },
    // 出库功能
    audit() {
      this.selectedRows = this.$refs.expertTable.selection;
      
      if (this.selectedRows.length === 0) {
        this.$message.warning('请先选择要出库的专家');
        return;
      }

      // 重置出库原因
      this.withdrawalReason = '';
      
      // 显示对话框
      this.withdrawalDialogVisible = true;
    },

    // 确认出库
    async confirmWithdrawal() {
      if (!this.withdrawalReason.trim()) {
        this.$message.warning('请填写出库原因');
        return;
      }

      try {
        this.loading = true;

        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 800));

        // 更新专家状态
        this.selectedRows.forEach(expert => {
          expert.auditStatus = '已出库';
          expert.withdrawalReason = this.withdrawalReason;
          expert.withdrawalTime = new Date().toISOString().slice(0, 10); // 添加出库时间
        });

        // 关闭对话框
        this.withdrawalDialogVisible = false;

        // 刷新数据
        this.fetchData();

        // 显示成功消息
        this.$message.success(`已成功将 ${this.selectedRows.length} 位专家出库`);

      } catch (error) {
        console.error('出库失败:', error);
        this.$message.error('出库失败，请重试');
      } finally {
        this.loading = false;
      }
    },
    
    storage() {
      this.$message.info('入库功能');
    },
    outputdata() {
      console.log(123);
      console.log(this.output1);
      if (!this.output1.id) {
        this.$message.error('专家ID不存在，无法出库！');
        return;
      }
      console.log('出库ID:', this.output1.id, '出库原因:', this.output1.reason);
      outlibrary(this.output1.id, this.output1.reason).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$message.success('出库成功！')
          this.deleteDialogVisible = false
          this.TotalexpertList()
        } else {
          this.$message.error('出库失败：' + (res.message || '未知错误'))
        }
      }).catch(error => {
        console.error('出库请求异常:', error);
        this.$message.error('出库请求异常，请检查网络或联系管理员')
      })
    },
    viewDetail(row) {
      // 将专家数据存储到 localStorage，因为路由参数可能无法传递复杂对象
      localStorage.setItem('currentExpertData', JSON.stringify(row));
      // 跳转到表单页面
      this.$router.push({
        path: '/form',
        query: { 
          id: row.id,
          mode: 'view'
        }
      });
    },
    
    // 编辑专家信息
    editExpert(row) {
      // 跳转到form/indexb页面进行编辑
      this.$router.push({
        path: '/form/indexb',
        query: { 
          id:row.id,
          expertId: row.expertId,
          mode: 'edit'
        }
      });
    },
    
    // 新增专家信息
    saveAdd() {
      this.$refs.addFormRef.validate(valid => {
        if (valid) {
          this.loading = true;
          
          if (this.apiConfig.useMock) {
            // 模拟API调用延迟
            setTimeout(() => {
              try {
                // 创建新专家对象
                const newExpert = {
                  id: Date.now(), // 使用时间戳作为临时ID
                  expertName: this.addForm.expertName,
                  auditStatus: this.addForm.auditStatus,
                  auditOffice: this.addForm.auditOffice,
                  gender: this.addForm.gender,
                  age: this.addForm.age,
                  position: this.addForm.position,
                  primaryMajor: this.addForm.primaryMajor,
                  education: this.addForm.education, // 使用下拉框的值
                  title: this.addForm.title,
                  unit: this.addForm.unit,
                  entryTime: new Date().toISOString().slice(0, 10) // 当前日期
                };
                
                // 添加到表格数据
                this.expertList.unshift(newExpert);
                
                // 刷新数据
                this.fetchData();
                
                // 关闭对话框
                this.addDialogVisible = false;
                
                // 显示成功消息
                this.$message({
                  type: 'success',
                  message: '专家信息添加成功'
                });
              } catch (error) {
                console.error('添加失败:', error);
                this.$message({
                  type: 'error',
                  message: '添加失败，请重试'
                });
              } finally {
                this.loading = false;
              }
            }, 500);
          } else {
            // 真实API调用
            axios.post(`${this.apiConfig.baseUrl}/api/expert`, this.addForm)
              .then(() => {
                // 刷新数据
                this.fetchData();
                
                // 关闭对话框
                this.addDialogVisible = false;
                
                // 显示成功消息
                this.$message({
                  type: 'success',
                  message: '专家信息添加成功'
                });
              })
              .catch(error => {
                console.error('添加失败:', error);
                this.$message({
                  type: 'error',
                  message: '添加失败，请重试'
                });
              })
              .finally(() => {
                this.loading = false;
              });
          }
        } else {
          this.$message({
            type: 'warning',
            message: '请完成必填项'
          });
          return false;
        }
      });
    },
    
    // 处理专业选择变化
    handleMajorChange(value) {
      console.log('选中的专业：', value);
    },
    
    // 格式化专业显示
    formatMajor(primaryMajor) {
      if (!primaryMajor) return '';
      if (Array.isArray(primaryMajor)) {
        return primaryMajor.join(' > ');
      }
      return primaryMajor;
    },
    
    // 获取学历标签
    getEducationLabel(value) {
      const education = this.educationOptions.find(item => item.value === value);
      return education ? education.label : value;
    },
    
    // 打开入库对话框
    storage() {
      this.selectedRows = this.$refs.expertTable.selection;
      
      if (this.selectedRows.length === 0) {
        this.$message.warning('请先选择要入库的专家');
        return;
      }

      // 重置入库状态
      this.isStoraging = false;
      this.storageProgress = 0;
      this.storageComplete = false;
      this.storageStatus = '准备入库';
      this.successCount = 0;
      this.failCount = 0;
      this.failList = [];
      
      // 显示对话框
      this.storageDialogVisible = true;
    },

    // 开始入库操作
    async startStorage() {
      this.isStoraging = true;
      this.storageStatus = '入库中';
      
      try {
        // 模拟入库过程
        const total = this.selectedRows.length;
        for (let i = 0; i < total; i++) {
          const expert = this.selectedRows[i];
          
          // 更新进度
          this.storageProgress = Math.floor((i + 1) * 100 / total);
          
          // 模拟API调用
          await new Promise(resolve => setTimeout(resolve, 800));
          
          // 模拟随机成功/失败
          const success = Math.random() > 0.2;
          if (success) {
            expert.storageStatus = {
              type: 'success',
              text: '入库成功'
            };
            this.successCount++;
          } else {
            expert.storageStatus = {
              type: 'danger',
              text: '入库失败'
            };
            this.failCount++;
            this.failList.push({
              expertName: expert.expertName,
              reason: '系统处理异常，请稍后重试'
            });
          }
        }
        
        // 完成入库
        this.storageComplete = true;
        this.storageStatus = '入库完成';
        
        // 显示结果消息
        if (this.failCount === 0) {
          this.$message.success(`已成功入库 ${this.successCount} 位专家`);
        } else {
          this.$message.warning(`入库完成，成功 ${this.successCount} 位，失败 ${this.failCount} 位`);
        }
        
      } catch (error) {
        console.error('入库失败:', error);
        this.storageStatus = '入库异常';
        this.$message.error('入库过程发生异常，请重试');
      }
    },

    // 关闭入库对话框
    closeStorageDialog() {
      this.storageDialogVisible = false;
      // 刷新列表数据
      this.fetchData();
    },

    // 处理单个专家审核状态变化
    handleAuditStatusChange(row) {
      // 检查是否有任何专家被设置为不通过
      this.showRejectReason = this.selectedRows.some(row => row.newAuditStatus === '审核不通过');
    },

    // 确认审核
    async confirmAudit() {
      if (this.showRejectReason && !this.rejectReason.trim()) {
        this.$message.warning('请填写审核不通过的原因');
        return;
      }

      try {
        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 800));

        // 更新专家状态
        this.selectedRows.forEach(expert => {
          expert.auditStatus = expert.newAuditStatus;
          if (expert.newAuditStatus === '审核不通过') {
            expert.rejectReason = this.rejectReason;
          }
        });

        // 关闭对话框
        this.auditDialogVisible = false;

        // 刷新数据
        this.fetchData();

        // 显示成功消息
        this.$message.success('审核操作已完成');

      } catch (error) {
        console.error('审核失败:', error);
        this.$message.error('审核失败，请重试');
      }
    },
   
   
    viewExpert(row) {
      this.editvisibale = true;
      this.basicvisible = false;
      console.log('查看专家信息:', row);
      
      // 获取专家详细信息
      getExpertBasicInfo(row.expertId).then(response => {
        if (response && response.data) {
          // 完整的专家信息
          this.row = response.data;
          
          // 获取专家附件信息
          getExpertAttach(row.expertId).then(attachResponse => {
            console.log('获取到的附件信息:', attachResponse);
            if (attachResponse.code === 200 && attachResponse.data) {
              const attachData = attachResponse.data;
              // 存储附件ID信息
              const fileIds = {
                idCard: attachData.idCard,
                certificate: attachData.certificate,
                qualification: attachData.qualification,
                supportMater: attachData.supportMater,
                applicationForm: attachData.applicationForm
              };
              console.log('提取的文件ID:', fileIds);
              
              // 将文件ID信息添加到row中
              this.$set(this.row, 'attachmentIds', fileIds);
            }
          }).catch(error => {
            console.error('获取附件信息失败:', error);
          });

          // 获取工作经历和其他信息
          if (this.row.expertId) {
            this.getWorkExperience(this.row.expertId);
            this.getSocialPart(this.row.expertId);
            this.getOtherInfo(this.row.expertId);
          } else {
            console.error('专家ID不存在');
          }
        }
      }).catch(error => {
        console.error('获取专家详细信息失败:', error);
        this.$message.error('获取专家详细信息失败');
      });
    },
      // 获取工作经历
      getWorkExperience(expertId) {
        console.log('获取工作经历，专家ID:', expertId);
        this.$http.get(`/admin/expertWorkExper/get/${expertId}`).then(response => {
          console.log('工作经历数据:', response.data);
          if (response && response.data) {
            // 映射后端字段到前端字段
            const mappedExperience = response.data.map(item => ({
              workUnit: item.orgName || '',
              startTime: item.startDate || '',
              endTime: item.endDate || '',
              jobTitle: item.title || '',
              jobDuty: item.position || '',
              id: item.id,
              expertId: item.expertId
            }));
            console.log('映射后的工作经历:', mappedExperience);
            this.$set(this.row, 'workExperience', mappedExperience);
          }
        }).catch(error => {
          console.error('获取工作经历失败:', error);
          this.$message.error('获取工作经历失败');
        });
      },
      // 获取社会兼、聘职情况
      getSocialPart(expertId) {
        console.log('获取社会兼职情况，专家ID:', expertId);
        this.$http.get(`/admin/expertSocialPart/get/${expertId}`).then(response => {
          console.log('社会兼职数据:', response.data);
          if (response && response.data) {
            // 映射后端字段到前端字段
            const mappedSocialPart = response.data.map(item => ({
              partTimeUnit: item.orgName || '',
              startTime: item.startDate || '',
              endTime: item.endDate || '',
              role: item.role || '',
              id: item.id,
              expertId: item.expertId
            }));
            console.log('映射后的社会兼职:', mappedSocialPart);
            this.$set(this.row, 'socialExperience', mappedSocialPart);
          }
        }).catch(error => {
          console.error('获取社会兼职情况失败:', error);
          this.$message.error('获取社会兼职情况失败');
        });
      },
      // 获取其他信息
      getOtherInfo(expertId) {
        console.log('获取专家其他信息，专家ID:', expertId);
        this.$http.get(`/admin/expertOtherInfo/get/${expertId}`).then(response => {
          console.log('其他信息数据:', response.data);
          if (response && response.data) {
            // 映射后端字段到前端字段
            const otherInfo = {
              researchAchievements: response.data.researchResults || '',
              projectMatters: response.data.projectConsultation || '',
              id: response.data.id,
              expertId: response.data.expertId,
              createTime: response.data.createTime,
              updateTime: response.data.updateTime
            };
            console.log('映射后的其他信息:', otherInfo);
            this.$set(this.row, 'otherInfo', otherInfo);
          }
        }).catch(error => {
          console.error('获取其他信息失败:', error);
          this.$message.error('获取其他信息失败');
        });
      },
   
    // 导出数据功能
    exportData() {
      // 检查是否有选中的行
      this.selectedRows = this.$refs.expertTable.selection;
      
      try {
        // 获取要导出的专家ID列表
        let ids = [];
        if (this.selectedRows.length > 0) {
          ids = this.selectedRows.map(row => row.expertId);
        } else {
          ids = this.expertList.map(row => row.expertId);
        }

        if (ids.length === 0) {
          this.$message.warning('没有可导出的数据');
          return;
        }

        const requestData = {
          ids: ids
        };

        this.$message.info('正在准备导出数据，请稍候...');
        
        // 使用原生 XMLHttpRequest 处理下载
        const xhr = new XMLHttpRequest();
        xhr.open('POST', process.env.VUE_APP_BASE_API + '/admin/common/pdfExport', true);
        xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
        xhr.setRequestHeader('Accept', 'application/zip, application/octet-stream');
        xhr.responseType = 'blob';

        const token = sessionStorage.getItem('token');
        if (!token) {
          this.$message.error('未登录或登录已过期，请重新登录');
          return;
        }
        xhr.setRequestHeader('token', token);
        xhr.onload = () => {
          if (xhr.status === 200) {
            // 创建 Blob
            const blob = new Blob([xhr.response], { type: 'application/zip' });
            
            // 创建下载链接
            const url = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = '陕西省水利专家信息总览.zip';
            document.body.appendChild(link);
            link.click();
            
            // 清理
            setTimeout(() => {
              document.body.removeChild(link);
              window.URL.revokeObjectURL(url);
            }, 100);

            this.$message.success('导出成功');
          } else {
            throw new Error('导出失败');
          }
        };

        xhr.onerror = () => {
          this.$message.error('导出失败，请重试');
        };

        // 发送请求
        xhr.send(JSON.stringify(requestData));

      } catch (error) {
        console.error('导出失败:', error);
        this.$message.error(`导出失败: ${error.message || '请重试'}`);
      }
    },
    
    // 导出列表数据功能
    excelExport() {
      try {
        let ids = [];
        
        // 检查是否有选中的专家
        this.selectedRows = this.$refs.expertTable.selection;
        
        if (this.selectedRows && this.selectedRows.length > 0) {
          // 如果有选中专家，则优先导出选中的专家
          ids = this.selectedRows.map(row => row.expertId);
          this.$message.info(`已选择 ${ids.length} 位专家进行导出`);
        } else {
          // 如果没有选中专家，则导出当前搜索结果中的所有专家
          ids = this.expertList.map(expert => expert.expertId);
          this.$message.info(`正在导出当前列表的 ${ids.length} 位专家`);
        }

        if (ids.length === 0) {
          this.$message.warning('没有可导出的数据');
          return;
        }

        // 构建筛选参数（与搜索条件一致）
        const searchParams = {
          name: this.searchForm.expertName || null,
          title: this.searchForm.title || null,
          primaryMajor: this.searchForm.primaryMajor.join('/') || null,
          gender: this.searchForm.gender || null,
          ageStart: this.searchForm.ageStart || null,
          ageEnd: this.searchForm.ageEnd || null,
          auditStatus: this.searchForm.auditStatus || null,
          belong: this.searchForm.auditOffice || null,
          auditStatus: '已入库',
          ids: ids  // 传递专家ID列表
        };
        
        // 过滤掉空值参数
        const filteredParams = Object.fromEntries(
          Object.entries(searchParams).filter(([key, value]) => 
            value !== null && value !== ''
          )
        );

        this.$message.info('正在准备导出数据，请稍候...');
        
        // 使用原生 XMLHttpRequest 处理下载
        const xhr = new XMLHttpRequest();
        xhr.open('POST', process.env.VUE_APP_BASE_API + '/admin/common/excelExport', true);
        xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
        xhr.setRequestHeader('Accept', 'application/vnd.ms-excel, application/octet-stream');
        xhr.responseType = 'blob';

        const token = sessionStorage.getItem('token');
        if (!token) {
          this.$message.error('未登录或登录已过期，请重新登录');
          return;
        }
        xhr.setRequestHeader('token', token);
        xhr.onload = () => {
          if (xhr.status === 200) {
            // 从响应头获取Content-Type，如果没有则默认为excel格式
            const contentType = xhr.getResponseHeader('Content-Type') || 'application/vnd.ms-excel';
            
            // 创建正确类型的Blob
            const blob = new Blob([xhr.response], { type: contentType });
            
            // 根据Content-Type确定文件扩展名
            let extension = '.xlsx';
            let fileName = '专家库列表';
            if (contentType.includes('sheet')) {
              extension = '.xlsx';
            } else if (contentType.includes('excel')) {
              extension = '.xls';
            } else if (contentType.includes('csv')) {
              extension = '.csv';
            }
            
            // 创建下载链接
            const url = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = fileName + extension;
            document.body.appendChild(link);
            link.click();
            
            // 清理
            setTimeout(() => {
              document.body.removeChild(link);
              window.URL.revokeObjectURL(url);
            }, 100);

            this.$message.success('导出成功');
          } else {
            throw new Error('导出失败');
          }
        };

        xhr.onerror = () => {
          this.$message.error('导出失败，请重试');
        };

        // 发送请求
        xhr.send(JSON.stringify(filteredParams));

      } catch (error) {
        console.error('导出列表失败:', error);
        this.$message.error(`导出列表失败: ${error.message || '请重试'}`);
      }
    },
  }
}
</script>

<style lang="less" scoped>
.dashboard-container {
  padding: 1.25rem;
  background-color: #fff;
  border-radius: 0.25rem;
  box-shadow: 0 0.125rem 0.75rem 0 rgba(0, 0, 0, 0.1);
  .mb-4 {
    margin-bottom: 1rem;
  }
  .mx-2 {
    margin: 0 0.5rem;
  }
}
.primary-btn{
  width: 6.0625rem;
  height: 2.5rem;
  background-color: #205382;
  border-radius: 0.3125rem;
  color: #fff;
  font-size: 1rem;
}
.custom-success-btn {
  width: 6.0625rem;
  height: 2.5rem;
  background-color: rgba(29, 183, 82, 0.74);
  border-radius: 0.3125rem;
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.35);
  &:hover,
  &:focus {
    background: #1DB752;
    border-radius: 0.3125rem;
    color: #fff;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
  }
  &:active {
    box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.3);
  }
}
.custom-danger-btn {
  width: 6.0625rem;
  height: 2.5rem;
  background-color: rgba(225, 63, 31, 0.7);
  border-radius: 0.3125rem;
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.35);
  &:hover,
  &:focus {
    background: #E13F1F;
    border-radius: 0.3125rem;
    color: #fff;
  }
}
.custom-primary-btn {
  width: auto;
  height: 2.5rem;
  background-color: rgba(45, 107, 164, 0.7);
  border-radius: 0.3125rem;
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.35);

  &:hover,
  &:focus {
    background: #2D6BA4;
    border-radius: 0.3125rem;
    color: #fff;
  }
}
.custom-info-btn {
  width: 6.0625rem;
  height: 2.5rem;
  background-color: rgba(31, 193, 189, 0.7);
  border-radius: 0.3125rem;
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.35);

  &:hover,
  &:focus {
    background: #1FC1BD;
    border-radius: 0.3125rem;
    color: #fff;
  }
}

.custom-warning-btn {
  width: 6.0625rem;
  height: 2.5rem;
  background-color: rgba(26, 127, 221, 0.7);
  border-radius: 0.3125rem;
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.35);

  &:hover,
  &:focus {
    background: #1A7FDD;
    border-radius: 0.3125rem;
    color: #fff;
  }
}

.button-container {
  display: flex;
  gap: 0.625rem;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
}

.age-label {
  display: flex;
  align-items: center;
}

/* 新增样式类，控制表单行布局 */
.el-form-item {
  display: inline-flex;
  align-items: center;
  margin-right: 0.9375rem;
}

/* 调整输入框和选择框宽度，使其紧凑排列 */
.el-input,
.el-select {
  width: 12.5rem;
}

.custom-form-item {
  height: 2.6875rem;
  width: 19.375rem;
  
  .el-form-item__label {
    width: 3.75rem;
    height: 2.6875rem;
  }
  
  .el-input {
    width: 14.6875rem !important;
    height: 2.6875rem !important;
    
    .el-input__inner {
      height: 2.6875rem !important;
      line-height: 2.6875rem !important;
      margin-left: 0.9375rem;
    }
  }
}

/* 全局调整（如果有其他表单项需要统一尺寸） */
.aligned-form {
  .el-form-item__label {
    height: 2rem;
    line-height: 2rem;

    &::before {
      vertical-align: middle; /* 红星与文字居中对齐 */
      margin-right: 0.25rem;
    }
  }

  .el-form-item__content {
    line-height: 2rem; /* 表单控件内容也保持一致的行高 */
  }

  // 对于单选按钮等特殊控件单独调整
  .el-radio-group {
    line-height: 2rem;
  }
}
  .loading-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}
  .empty-tip {
    padding: 1.25rem;
    text-align: center;
    color: #666;
  .el-icon {
    margin-bottom: 0.625rem;
    color: #999;
  }
}
/* 新增样式，确保红星对齐 */
.aligned-form {
  .el-form-item__label {
    // 确保所有标签有相同的高度
    height: 2rem;
    line-height: 2rem;
    // 确保红星与标签文本对齐
    &::before {
      vertical-align: middle;
      margin-right: 0.25rem;
    }
    .el-form-item {
      display: flex;
      align-items: center; /* 垂直居中 */
      margin-bottom: 1.125rem;  /* 可根据需要调整间距 */
    }
  }
  // 确保表单元素垂直居中
  .el-form-item__content {
    line-height: 2rem;
  }
  // 特殊处理单选按钮的对齐
  .el-radio-group {
    line-height: 2rem;
  }
}
.text-warning {
  color: #E13F1F;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-4 {
  margin-top: 1rem;
}
.storage-dialog {
  .storage-container {
    padding: 0 20px;
  }

  .storage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .selected-count {
      font-size: 16px;
      
      .count-number {
        color: #1890ff;
        font-weight: bold;
        margin: 0 5px;
      }
    }
  }

  .storage-content {
    .storage-progress {
      margin: 30px 0;
      text-align: center;
      
      .progress-text {
        margin-top: 10px;
        color: #666;
      }
    }

    .storage-result {
      margin-top: 20px;
      
      .result-summary {
        display: flex;
        gap: 40px;
        margin-bottom: 20px;
        
        .success-count {
          color: #67c23a;
          
          i {
            margin-right: 5px;
          }
        }
        
        .fail-count {
          color: #f56c6c;
          
          i {
            margin-right: 5px;
          }
        }
      }

      .fail-list {
        .fail-title {
          margin-bottom: 10px;
          color: #666;
          font-weight: bold;
        }
      }
    }
  }
}

/* 确保弹窗内的表格不会太高 */
.storage-dialog .el-table {
  margin-bottom: 20px;
  
  &::before {
    display: none;
  }
}

/* 调整进度条样式 */
.storage-progress {
  .el-progress-bar {
    margin-right: 0;
    margin-left: 0;
  }
  
  .el-progress__text {
    font-size: 16px;
  }
}

.audit-dialog {
  .audit-container {
    padding: 0 20px;
  }

  .audit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .selected-count {
      font-size: 16px;
      
      .count-number {
        color: #1890ff;
        font-weight: bold;
        margin: 0 5px;
      }
    }

    .audit-actions {
      .el-radio-button__inner {
        padding: 8px 20px;
      }
    }
  }

  .audit-content {
    .reject-reason {
      margin-top: 20px;
      
      .reason-header {
        margin-bottom: 10px;
        
        .reason-title {
          font-size: 14px;
          font-weight: 500;
          color: #1f2f3d;
        }
        
        .reason-required {
          color: #f56c6c;
          margin-left: 4px;
        }
      }
      
      .el-textarea {
        width: 100%;
        
        .el-textarea__inner {
          padding: 10px;
        }
      }
    }
  }
}

/* 调整表格内选择器的样式 */
.audit-dialog .el-table {
  .el-select {
    width: 100%;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .audit-dialog {
    .audit-header {
      flex-direction: column;
      gap: 15px;
      
      .audit-actions {
        width: 100%;
        
        .el-radio-group {
          width: 100%;
          display: flex;
          
          .el-radio-button {
            flex: 1;
            
            .el-radio-button__inner {
              width: 100%;
            }
          }
        }
      }
    }
  }
}
.view-dialog {
  .expert-info {
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .evaluation-info {
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .total-reviews {
    margin-bottom: 20px;
  }

  .review-table {
    h3 {
      margin-bottom: 10px;
      font-size: 16px;
      color: #333;
    }

    .el-table {
      th, td {
        text-align: center;
      }
    }
  }

  .evaluation-text {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
  }
}
.withdrawal-dialog {
  .withdrawal-container {
    padding: 0 20px;
  }

  .withdrawal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .selected-count {
      font-size: 16px;
      
      .count-number {
        color: #1890ff;
        font-weight: bold;
        margin: 0 5px;
      }
    }
  }

  .withdrawal-content {
    .withdrawal-reason {
      margin-top: 20px;
      
      .reason-header {
        margin-bottom: 10px;
        
        .reason-title {
          font-size: 14px;
          font-weight: 500;
          color: #1f2f3d;
        }
        
        .reason-required {
          color: #f56c6c;
          margin-left: 4px;
        }
      }
      
      .el-textarea {
        width: 100%;
        
        .el-textarea__inner {
          padding: 10px;
        }
      }
    }
  }
}
.search-form-custom {
  .el-form-item__label {
    font-weight: bold;
    color: #333;
    font-size: 1.1em;
    line-height: 2.5em;
    text-align: right;
    padding-right: 0.8em;
  }
  .search-input {
    height: 2.5em !important;
    line-height: 2.5em !important;
    font-size: 1.1em;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }
  .el-input__inner, .el-select .el-input__inner {
    height: 2.5em !important;
    line-height: 2.5em !important;
    font-size: 1.1em;
  }
  .el-cascader .el-input__inner {
    height: 2.5em !important;
    line-height: 2.5em !important;
    font-size: 1.1em;
  }
  .form-actions {
    margin-left: 0;
  }
  .search-btn {
    min-width: 5em;
    height: 2.5em;
    font-size: 1.1em;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.08);
    margin-left: 1em;
  }
}
.beautify-label {
  .el-form-item__label {
    font-weight: 700;
    font-size: 1.15em;
    color: #2d3a4b;
    letter-spacing: 0.02em;
  }
}
.beautify-input {
  border-radius: 0.5em !important;
  box-shadow: 0 2px 8px rgba(32, 83, 130, 0.08);
  font-size: 1.13em;
  width: 18em !important;
  min-width: 12em;
}
.beautify-age-group {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.beautify-age-input {
  border-radius: 0.5em !important;
  box-shadow: 0 2px 8px rgba(32, 83, 130, 0.08);
  font-size: 1.13em;
  width: 5.5em !important;
  min-width: 4em;
}
.beautify-age-dash {
  font-size: 1.2em;
  color: #888;
  margin: 0 0.3em;
  font-weight: 600;
}
.beautify-age-unit-inline {
  font-size: 1.1em;
  color: #090909de;
  margin-left: 1em;
  font-weight: 500;
  display: inline-block;
  white-space: nowrap;
  line-height: 2.5em;
}
.export-label {
  font-size: 1.18em;
  font-weight: 700;
  color: #555;
  min-width: 7em;
  text-align: right;
  display: inline-block;
}
.export-dialog-row {
  margin-bottom: 1.6em;
  line-height: 1.5em;
}
.export-radio-group {
  display: flex !important;
  align-items: center;
  gap: 2.2em;
}
</style>
